import { project, simulator } from '@/editor'
import { SimulatorRenderer } from '@easy-editor/react-renderer-dashboard'
import { observer } from 'mobx-react'
import { RendererContextMenu } from './layouts/ContextMenu'

const Renderer = observer(() => {
  const isEmpty = project.documents.length === 0

  if (isEmpty) {
    return (
      <div className='flex h-full w-full items-center justify-center'>
        {/* biome-ignore lint/a11y/noSvgWithoutTitle: <explanation> */}
        <svg viewBox='0 0 70 60' width='116' height='100' xmlns='http://www.w3.org/2000/svg'>
          <defs id='SvgjsDefs1001'></defs>
          <g
            transform='matrix(0.6048046792627652,0,0,0.6048046792627652,-0.000018403100297668076,-0.0004948108808732459)'
            fill='currentColor'
          >
            <path
              xmlns='http://www.w3.org/2000/svg'
              d='M95.108,84.125c-0.484,0-0.955-0.252-1.216-0.701L65.849,34.79c-0.386-0.671-0.155-1.528,0.516-1.917  c0.673-0.386,1.527-0.156,1.916,0.515l28.043,48.634c0.386,0.67,0.156,1.527-0.515,1.916C95.587,84.064,95.346,84.125,95.108,84.125  z'
            ></path>
            <path
              xmlns='http://www.w3.org/2000/svg'
              d='M76.938,84.125H1.403c-0.501,0-0.964-0.266-1.213-0.701c-0.252-0.433-0.252-0.967-0.003-1.401L47.011,0.716  c0.251-0.433,0.714-0.701,1.215-0.701h19.23c0.775,0,1.402,0.627,1.402,1.402c0,0.774-0.627,1.401-1.402,1.401H49.037L3.828,81.321  h73.11c0.774,0,1.401,0.627,1.401,1.401C78.339,83.498,77.712,84.125,76.938,84.125z'
            ></path>
            <path xmlns='http://www.w3.org/2000/svg' d='M48.892,34.089'></path>
            <path
              xmlns='http://www.w3.org/2000/svg'
              d='M76.938,84.125H1.403c-0.775,0-1.402-0.627-1.402-1.402c0-0.774,0.627-1.401,1.402-1.401h73.109L56.766,50.554  c-0.386-0.67-0.156-1.527,0.515-1.916c0.671-0.386,1.528-0.156,1.917,0.515l18.956,32.87c0.249,0.435,0.249,0.969-0.003,1.401  C77.901,83.856,77.439,84.125,76.938,84.125z'
            ></path>
            <path
              xmlns='http://www.w3.org/2000/svg'
              d='M28.707,100.001H10.76c-0.775,0-1.402-0.627-1.402-1.401c0-0.775,0.627-1.402,1.402-1.402h17.946  c0.774,0,1.401,0.627,1.401,1.402C30.108,99.374,29.481,100.001,28.707,100.001z'
            ></path>
            <path
              xmlns='http://www.w3.org/2000/svg'
              d='M76.938,84.125H1.403c-0.501,0-0.964-0.269-1.213-0.701c-0.252-0.433-0.252-0.967-0.003-1.401l18.954-32.87  c0.389-0.671,1.24-0.901,1.917-0.515c0.671,0.389,0.901,1.246,0.515,1.916L3.828,81.321h73.11c0.774,0,1.401,0.627,1.401,1.401  C78.339,83.498,77.712,84.125,76.938,84.125z'
            ></path>
            <path
              xmlns='http://www.w3.org/2000/svg'
              d='M104.236,100.001H28.707c-0.775,0-1.402-0.627-1.402-1.401c0-0.775,0.627-1.402,1.402-1.402h73.104L84.067,66.434  c-0.386-0.671-0.156-1.528,0.515-1.917c0.671-0.383,1.527-0.158,1.916,0.515l18.954,32.867c0.249,0.436,0.249,0.969-0.003,1.401  C105.2,99.732,104.737,100.001,104.236,100.001z'
            ></path>
            <path
              xmlns='http://www.w3.org/2000/svg'
              d='M76.938,84.125H20.633c-0.775,0-1.402-0.627-1.402-1.402c0-0.774,0.627-1.401,1.402-1.401h56.305  c0.774,0,1.401,0.627,1.401,1.401C78.339,83.498,77.712,84.125,76.938,84.125z'
            ></path>
            <path
              xmlns='http://www.w3.org/2000/svg'
              d='M67.432,67.644h-37.34c-0.501,0-0.964-0.266-1.213-0.701c-0.252-0.433-0.252-0.967-0.003-1.401l37.34-64.839  c0.386-0.671,1.24-0.901,1.917-0.515c0.67,0.386,0.9,1.243,0.515,1.917L32.517,64.84h34.915c0.774,0,1.401,0.627,1.401,1.401  C68.833,67.017,68.207,67.644,67.432,67.644z'
            ></path>
            <path
              xmlns='http://www.w3.org/2000/svg'
              d='M67.432,67.644H48.544c-0.501,0-0.964-0.266-1.213-0.701c-0.252-0.433-0.252-0.967-0.003-1.401l18.519-32.155  c0.389-0.671,1.24-0.901,1.916-0.515c0.671,0.386,0.9,1.243,0.515,1.917L50.97,64.84h16.462c0.774,0,1.401,0.627,1.401,1.401  C68.833,67.017,68.207,67.644,67.432,67.644z'
            ></path>
            <path
              xmlns='http://www.w3.org/2000/svg'
              d='M10.76,100.001c-0.479,0-0.947-0.246-1.208-0.69L0.195,83.435c-0.394-0.668-0.172-1.524,0.496-1.919  c0.665-0.392,1.525-0.173,1.919,0.495l9.358,15.877c0.394,0.668,0.172,1.527-0.496,1.919  C11.248,99.938,11.004,100.001,10.76,100.001z'
            ></path>
            <path
              xmlns='http://www.w3.org/2000/svg'
              d='M104.236,100.001c-0.26,0-0.521-0.071-0.753-0.219c-0.651-0.416-0.846-1.281-0.43-1.936l9.645-15.159L67.457,4.223  L31.332,66.956c-0.392,0.671-1.243,0.896-1.917,0.515c-0.671-0.386-0.901-1.243-0.515-1.916l37.34-64.839  c0.504-0.865,1.928-0.865,2.432,0l46.881,81.307c0.261,0.451,0.247,1.013-0.032,1.453l-10.103,15.876  C105.15,99.771,104.699,100.001,104.236,100.001z'
            ></path>
          </g>
        </svg>
      </div>
    )
  }

  return (
    <RendererContextMenu>
      <SimulatorRenderer host={simulator} />
    </RendererContextMenu>
  )
})

export default Renderer
